<template>
	<view>
		<view class="navigation" style="height: 44px;background-color: #fff;"></view>
		<!-- 导航栏 -->
		<view class="content">
		    <!-- 距离顶部的距离 刚好留出状态栏即可 即statusBarHeight -->
		    <view class="topNav" :style="{height:navHeight+'px',paddingTop:statusBarHeight+'px'}">
				<view class="nav-left" @tap="goToBack">
					<up-icon name="arrow-left"  size="22"></up-icon>
				</view>
				<view class=" nav-center">
					新增客户
				</view>
				<view class="nav-right">
					<view @tap="addCustomer">
						完成
					</view>
				</view>
		    </view>
		</view>
	
		<!-- 表单 -->
		<up-form labelPosition="left" :model="model" :rules="addCluesFormRules" ref="formRef" class="form" >
			<up-form-item label="姓名"  prop="userInfo.name" :borderBottom="true" ref="formRef" labelWidth="160rpx" >
				<template #label>
					<view  style="width: 160rpx;font-size: 30rpx;line-height: 50rpx;">
						<text style="color: red;">*</text>
						<text>姓名</text>
					</view>
				</template>
				<up-input v-model="model.userInfo.name"  border="none" placeholder="请输入姓名 "></up-input>
			</up-form-item>
			
			<up-form-item label="联系方式1" prop="userInfo.phoneFirst" :borderBottom="true" ref="formRef"  labelWidth="160rpx" >
				<template #label>
					<view  style="width: 160rpx;font-size: 30rpx;line-height: 50rpx;">
						<text style="color: red;">*</text>
						<text>联系方式</text>
					</view>
				</template>
				<up-input v-model="model.userInfo.phoneFirst" border="none" placeholder="请输入联系方式1" @blur="inspectPhone"></up-input>
			</up-form-item>
			
			<up-form-item label="性别" prop="userInfo.sex" :borderBottom="true" @tap="showSex = true;"  labelWidth="160rpx">
				<up-input  @tap="showSex = true;" v-model="model.userInfo.sex" :readonly="true" disabledColor="#ffffff" placeholder="请选择性别" border="none" style="pointer-events: none"></up-input>
				<template #right>
					<up-icon
						name="arrow-right"
					></up-icon>
				</template>
			</up-form-item>
			
			<up-form-item label="联系方式2"  :borderBottom="true" ref="formRef"  labelWidth="160rpx">
				<up-input v-model="model.userInfo.phoneSecond" border="none" placeholder="请输入联系方式2"></up-input>
			</up-form-item>
			
			<up-form-item label="层次" :borderBottom="true" @tap="showLevel = true; "  labelWidth="160rpx">
				<up-input @tap="showLevel = true; " v-model="model.userInfo.level" :readonly="true" disabledColor="#ffffff" placeholder="请选择层次" border="none" style="pointer-events: none"></up-input>
				<template #right>
					<up-icon
						name="arrow-right"
					></up-icon>
				</template>
			</up-form-item>
			
			<up-form-item label="院校"  :borderBottom="true" ref="formRef"  labelWidth="160rpx">
				<up-input v-model="model.userInfo.college" border="none" placeholder="请输入院校名称"></up-input>
			</up-form-item>
			
			<up-form-item label="届次"  :borderBottom="true" @tap="showClassTime = true; "  labelWidth="160rpx">
				<up-input @tap="showClassTime = true; " v-model="model.userInfo.classTime" :readonly="true" disabledColor="#ffffff" placeholder="请选择届次" border="none" style="pointer-events: none"></up-input>
				<template #right>
					<up-icon
						name="arrow-right"
					></up-icon>
				</template>
			</up-form-item>
			
			<up-form-item label="年级"  :borderBottom="true" @tap="showGrade = true; "  labelWidth="160rpx">
				<up-input @tap="showGrade = true; " v-model="model.userInfo.grade" :readonly="true" disabledColor="#ffffff" placeholder="请选择年级" border="none" style="pointer-events: none"></up-input>
				<template #right>
					<up-icon
						name="arrow-right"
					></up-icon>
				</template>
			</up-form-item>
			
			<up-form-item label="选科/专业":borderBottom="true" ref="formRef"  labelWidth="160rpx">
				<up-input v-model="model.userInfo.major" border="none" placeholder="请输入选科/专业"></up-input>
			</up-form-item>
			
			<up-form-item label="客户等级" prop="userInfo.ranks" :borderBottom="true" @tap="showRanks = true;"  labelWidth="160rpx">
				<template #label>
					<view  style="width: 160rpx;font-size: 30rpx;line-height: 50rpx;">
						<text style="color: red;">*</text>
						<text>客户等级</text>
					</view>
				</template>
				<up-input @tap="showRanks = true;" v-model="model.userInfo.ranks" :readonly="true" disabledColor="#ffffff" placeholder="请选择客户等级" border="none" style="pointer-events: none"></up-input>
				<template #right>
					<up-icon
						name="arrow-right"
					></up-icon>
				</template>
			</up-form-item>
			
			<up-form-item label="渠道来源" :borderBottom="true" @tap="roleAuthority== 'partner'?showSource =false:showSource = true; " labelWidth="160rpx">
				<up-input @tap="showSource = true; " v-model="model.userInfo.source" :readonly="true" disabledColor="#ffffff" placeholder="请选择渠道来源" border="none" style="pointer-events: none"></up-input>
				<template #right>
					<up-icon
						name="arrow-right"
					></up-icon>
				</template>
			</up-form-item>
			
			<up-form-item label="流程进展"  :borderBottom="true" labelWidth="160rpx">
				<up-input v-model="model.userInfo.progressId" :disabled="true" :readonly="true" disabledColor="#ffffff" placeholder="请选择流程进展" border="none" ></up-input>
				<template #right>
					<up-icon
						name="arrow-right"
					></up-icon>
				</template>
			</up-form-item>
			
		</up-form>
		
		<!-- 性别选择 -->
		<up-action-sheet :show="showSex" :actions="actionsSex" title="请选择性别" 
			@close="showSex = false" @select="sexSelect" wrapMaxHeight="600rpx" >
		</up-action-sheet>
		
		<!-- 层次选择 -->
		<up-action-sheet :show="showLevel" :actions="actionsLevel" title="请选择层次" 
			@close="showLevel = false" @select="levelSelect" wrapMaxHeight="600rpx" >
		</up-action-sheet>
		
		<!-- 届次选择 -->
		<up-action-sheet :show="showClassTime" :actions="actionsClassTime" title="请选择届次" 
			@close="showClassTime = false" @select="classTimeSelect" wrapMaxHeight="600rpx" >
		</up-action-sheet>
		
		<!-- 年级选择 -->
		<up-action-sheet :show="showGrade" :actions="actionsGrade" title="请选择年级" 
			@close="showGrade = false" @select="gradeSelect" wrapMaxHeight="600rpx" >
		</up-action-sheet>
		
		<!-- 客户等级选择 -->
		<up-action-sheet :show="showRanks" :actions="actionsRanks" title="请选择客户等级" 
			@close="showRanks = false" @select="ranksSelect" wrapMaxHeight="600rpx" >
		</up-action-sheet>
		
		<!-- 渠道来源选择 -->
		<up-action-sheet :show="showSource" :actions="actionsSource" title="请选择渠道来源" 
			@close="showSource = false" @select="sourceSelect" wrapMaxHeight="600rpx" >
		</up-action-sheet>
		
		<!-- 流程进展选择 -->
		<!-- <up-action-sheet :show="showProgressId" :actions="actionsProgressId" title="请选择流程进展" 
			@close="showProgressId = false" @select="progressIdSelect" wrapMaxHeight="600rpx" >
		</up-action-sheet> -->
		
		
	</view>
</template>

<script setup>
	import { ref,reactive, onMounted } from 'vue';
	import { onShow } from '@dcloudio/uni-app'; 
	import { cemCustomerInfoGetProgress,cemCustomerInfoInsertOrUpdateCustomer,studentInspectPhone } from '../../utils/clue';
	let navHeight = ref('');// 导航栏高度
	let statusBarHeight = ref('');// 状态栏高度
	
	// 联系方式1校验
	let inspectPhone = (val)=>{
		if(val){
			studentInspectPhone({
				phone:val
			}).then(res=>{
				if(res.code==200){
					uni.showToast({
						title: '手机号可用',
						icon: 'success',
						duration: 2000
					})
				}
			})
		}
	}
	
	// 返回
	let goToBack = ()=>{
		uni.navigateTo({
			url:'/pages/myCustomer/myCustomer'
		})
	}
	
	// 表单
	const formRef = ref(null);  
	
	const model = reactive({
		userInfo:{
			name: '',
			phoneFirst: '',
			sex: '',
			phoneSecond: '',
			level: '',
			college: '',
			classTime: '',
			grade: '',
			major: '',
			ranks: '',
			source: '',
			progressId: '未沟通',
		}
	})
	
	// 表单校验
	const addCluesFormRules = ref({
		'userInfo.name': [{ 
			type: 'string',  
			required: true,  
			message: '请填写姓名',  
			trigger: ['blur', 'change'],},
	    ],
		'userInfo.phoneFirst': [{
			type: 'string',  
			required: true,  
			message: '请输入联系方式',  
			trigger: ['blur', 'change'],},
		],
		'userInfo.ranks': [{
			type: 'string',  
			required: true,  
			message: '请选择客户等级',  
			trigger: ['blur', 'change'],},
		],
	  })
	  
	  
	// 性别选择
	const actionsSex = ref([  
		{ name: '男' },  
		{ name: '女' },  
		{ name: '未知' },  
	])
	
	let showSex = ref(false)
	
	let sexSelect =(e)=> {  
		model.userInfo.sex = e.name;  
		if (formRef.value) {  
			formRef.value.validateField('userInfo.sex');  
		}  
	}
	
	// 层次选择
	const actionsLevel = ref([  
		{ name: '职业高中' },  
		{ name: '普通高中' },  
		{ name: '职业本科' },  
		{ name: '普通本科' },  
		{ name: '高职专科' },  
	])
	
	let showLevel = ref(false)
	
	let levelSelect =(e)=> {  
		model.userInfo.level = e.name;  
		if (formRef.value) {  
			formRef.value.validateField('userInfo.level');  
		}  
	}
	
	// 届次选择
	const actionsClassTime = ref([  
		{ name: '2029' },
		{ name: '2028' },
		{ name: '2027' },
		{ name: '2026' },
		{ name: '2025' },
		{ name: '2024' },
		{ name: '2023' },
		{ name: '2022' },
		{ name: '2021' },
	])
	
	let showClassTime = ref(false)
	
	let classTimeSelect =(e)=> {  
		model.userInfo.classTime = e.name;  
		if (formRef.value) {  
			formRef.value.validateField('userInfo.classTime');  
		}  
	}
	
	// 年级选择
	const actionsGrade = ref([  
		{ name: '硕士研究生' },
		{ name: '大三及以上' },
		{ name: '大二' },
		{ name: '大一' },
		{ name: '高三' },
		{ name: '高二' },
		{ name: '高一' },
		{ name: '初三' },
		{ name: '初二' },
		{ name: '初一' },
	])
	
	let showGrade = ref(false)
	
	let gradeSelect =(e)=> {  
		model.userInfo.grade = e.name;  
		if (formRef.value) {  
			formRef.value.validateField('userInfo.grade');  
		}  
	}
	
	// 等级选择
	const actionsRanks = ref([  
		{ name: 'A' },
		{ name: 'B' },
		{ name: 'C' },
		{ name: 'D' },
	])
	
	let showRanks = ref(false)
	
	let ranksSelect =(e)=> {  
		model.userInfo.ranks = e.name;  
		if (formRef.value) {  
			formRef.value.validateField('userInfo.ranks');  
		}  
	}
	
	// 来源选择
	const actionsSource = ref([  
		{ name: '资源置换' },
		{ name: '老客户转介绍' },
		{ name: '机构推荐' },
		{ name: '自然流量' },
		{ name: '直播获客' },
		{ name: '流量中心获客' },
	])
	
	let showSource = ref(false)
	
	let sourceSelect =(e)=> {  
		model.userInfo.source = e.name;  
		if (formRef.value) {  
			formRef.value.validateField('userInfo.source');  
		}  
	}
	
	// 流程进展选择
	const actionsProgressId= ref([])
	
	let showProgressId = ref(false)
	
	let progressIdSelect =(e)=> {  
		model.userInfo.progressId = e.name;  
		if (formRef.value) {  
			formRef.value.validateField('userInfo.progressId');  
		}  
	}	
	// 流程进展数组
	let progressArray = ref([])
	
	
	// 角色权限
	let roleAuthority = JSON.parse(uni.getStorageSync('roleAuthority'))
	
	onShow(()=>{
		if(roleAuthority == 'partner'){
			model.userInfo.source = '共享合伙人'
		}else{
			model.userInfo.source = ''
		}
		progressArray.value = uni.getStorageSync('progressArray')
		for(let i= 0; i < progressArray.value.length;i++){
			actionsProgressId.value.push({
				name:progressArray.value[i].progressName
			})
		}
	})
	
	onMounted(()=>{
		
		let {statusBarHeights,system} = uni.getSystemInfoSync()
		// 注意返回的单位是px 不是rpx
		// 而导航栏的高度则 = 状态栏的高度 + 判断机型的值（是ios就+40，否则+44）
		// 这个高度刚好和胶囊对齐
		statusBarHeight.value = statusBarHeights
		navHeight.value = statusBarHeights + (system.indexOf('iOS') > -1 ? 40 : 44)
	})

	
	// 完成添加
	let addCustomer = ()=>{
		if(model.userInfo.name == ''){
			uni.showToast({
				title: '请填写客户姓名',
				icon: 'none'
			})
		}else if(model.userInfo.phoneFirst == ''){
			uni.showToast({
				title: '请填写客户联系方式',
				icon: 'none'
			})
		}else if(model.userInfo.ranks == ''){
			uni.showToast({
				title: '请填写客户等级',
				icon: 'none'
			})
		}else{
			cemCustomerInfoInsertOrUpdateCustomer({
				businessId: uni.getStorageSync('businessId'),
				// businessId: 1,
				classTime: model.userInfo.classTime,
				college:  model.userInfo.college,
				grade:  model.userInfo.grade,
				isClient: 2,
				level:  model.userInfo.level,
				major:  model.userInfo.major,
				name:  model.userInfo.name,
				phoneFirst:  model.userInfo.phoneFirst,
				phoneSecond:  model.userInfo.phoneSecond,
				progressId: model.userInfo.progressId?progressArray.value.filter(item=>item.progressName == model.userInfo.progressId)[0].progressId:null,
				ranks:  model.userInfo.ranks,
				sex:  model.userInfo.sex,
				source:  model.userInfo.source
			}).then(res=>{
				if(res.code == 200){
					uni.showToast({
						title: '添加成功',
						icon: 'success',
						duration: 2000
					})
					uni.navigateTo({
						url:'/pages/myCustomer/myCustomer'
					})
				}
			})
		}
	}
	
</script>

<style lang="scss" scoped>

	/* =========导航栏========= */
	.topNav {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	
	.nav-left {
		width: 20%;
		font-size: 36rpx;
		font-weight: 600;
	}
	
	.nav-center{
		width: 60%;
		height: 62rpx;
		padding-left: 25rpx;
		box-sizing: border-box;
		text-align: center;
	}
	 
	.nav-right {
		width: 20%;
		color: rgba(64,149,229,1);
		font-size: 30rpx;
		text-align: right;
		font-family: PingFangSC-regular;
		display: flex;
		justify-content: end;
		margin-right: 20rpx;
	}

	/* =========表单内容========= */
	.form{
		margin-top: 20rpx;
		width: 90%;
		margin-left: 5%;
		font-size: 30rpx;
	}
</style>
